<template>
  <el-table-column
    :key="colItem.key"
    :label="colItem.name"
    v-bind="configData?configData.fieldsProp[colItem.key] || {} : {minWidth: '140'}"
    :class-name="configData && configData.fieldsProp[colItem.key] && configData.fieldsProp[colItem.key].type === 'customerLevel' ? 'cell-bg-box' : ''">
    <template slot-scope="scope">
      <template v-if="configData && configData.fieldsProp && configData.fieldsProp[colItem.key]">
        <PriceColumn v-if="configData.fieldsProp[colItem.key].type === 'price'" :real-val="scope.row[colItem.key]" :price="configData.fieldsProp[colItem.key].unit === '分'?scope.row[colItem.key] / 100:scope.row[colItem.key]" />
        <template v-else-if="configData.fieldsProp[colItem.key].type === 'filter'">
          <div v-if="condition(scope.row)">{{ configData.fieldsProp[colItem.key].condition.text }}</div>
          <ToolTip v-else :content="getFilterContent(colItem, scope)" />
        </template>
        <div v-else-if="configData.fieldsProp[colItem.key].type === 'date'" class="ellipsisOne">{{ configData.fieldsProp[colItem.key].filter(scope.row[colItem.key], configData.fieldsProp[colItem.key].format) }}</div>
        <template v-else-if="configData.fieldsProp[colItem.key].type === 'allPersonNum'">
          <div v-if="scope.row.allPersonNum">{{ scope.row.allPersonNum - scope.row.unfillNum }}{{ `/${scope.row.allPersonNum }` }}</div>
          <div v-else>--</div>
        </template>
        <template v-else-if="configData.fieldsProp[colItem.key].type === 'dateRange'">
          <div class="ellipsisOne">{{ getRangeDate(scope.row) }}</div>
        </template>
        <template v-else-if="configData.fieldsProp[colItem.key] && configData.fieldsProp[colItem.key].type === 'customerLevel'">
          <el-tooltip v-if="scope.row.customerLevel" :open-delay="800" placement="top">
            <div slot="content" style="max-width: 200px;">{{ scope.row.customerLevel }}</div>
            <span
              :style="{color: scope.row.levelColor || '#333', background: scope.row.levelColor ? changeColorAlphaVal(scope.row.levelColor, 0.14) : 'transparent'}"
              class="ellipsisOne text-bg">
              {{ scope.row.customerLevel }}
            </span>
          </el-tooltip>
          <div
            v-else
            :style="{color: scope.row.levelColor || '#333', background: scope.row.levelColor ? changeColorAlphaVal(scope.row.levelColor, 0.14) : 'transparent'}"
            class="text-bg">--</div>
        </template>
        <template v-else-if="configData.fieldsProp[colItem.key].type === 'contractEffectStartDate'">
          <div class="ellipsisOne">
            <span v-if="scope.row.contractDate === 1 || scope.row.contractDate === null">{{ scope.row.contractEffectStartDate | format('YYYY/MM/DD', '--') }} {{ handleLimit(scope.row) }} {{ scope.row.contractEffectEndDate | format('YYYY/MM/DD') }}</span>
            <span v-else>{{ scope.row.pushTime | format('YYYY/MM/DD') }}</span>
          </div>
        </template>
        <ToolTip v-else :is-can-click="!!configData.fieldsProp[colItem.key].routerRedirect" :content="scope.row[colItem.key]" @handelClick="handelClick(scope.row, configData.fieldsProp[colItem.key])" />
      </template>
      <ToolTip v-else-if="configData && !scope.row.content" :content="getContent(scope.row[colItem.key])" />
      <ToolTip v-else-if="scope.row.content" :is-can-click="colItem.type === 'workflowId'" :content="getContent(scope.row.content[colItem.key])" @handelClick="toDetail(scope.row)" />
      <div v-else>--</div>
    </template>
  </el-table-column>
</template>

<script>
import { format } from '@/filters/date';
import math from '@/utils/math';
import { changeColorAlphaVal } from '@/utils/tools';
export default {
  filters: { format },
  props: {
    configData: {
      type: Object,
      default: null
    },
    colItem: {
      type: Object,
      default: () => ({})
    },
    element: {
      type: Object,
      default: null
    }
  },
  methods: {
    changeColorAlphaVal,
    condition(item) {
      const condition = this.configData.fieldsProp[this.colItem.key].condition;
      if (!condition) return false;
      if (item[condition.key] === condition.value) {
        return true;
      }
      return false;
    },
    getFilterContent(colItem, scope) {
      const data = this.configData.fieldsProp[colItem.key];
      const params = data.filterParams || null;
      return data.filter(scope.row[colItem.key], params, scope.row);
    },
    getRangeDate(item) {
      const data = this.configData.fieldsProp[this.colItem.key];
      if (item[data.start] && item[data.end]) {
        return `${data.filter(item[data.start], data.format)} - ${data.filter(item[data.end], data.format)}`;
      }
      return '--';
    },
    handleLimit(row) {
      if (!row.contractEffectEndDate && !row.contractEffectStartDate) {
        return '/';
      }
      return '-';
    },
    handelClick(item, configProp) {
      const params = configProp.routerRedirect(item);
      const routeUrl = this.$router.resolve(params);
      window.open(routeUrl.href, '_blank');
    },
    toDetail(rowData) {
      const moduleId = this.element.options.remoteParams.workFlowId || this.element.options.remoteParams.id;
      const routeUrl = this.$router.resolve({
        name: 'approvalModuleDetail',
        params: { moduleId },
        query: { id: rowData.id, processId: rowData.processId }
      });
      window.open(routeUrl.href, '_blank');
    },
    getContent(content) {
      const isShowPercentage = this.colItem.type === 'input' && this.colItem.options && this.colItem.options.isShowPercentage;
      if (!isShowPercentage || !content) return content;
      if (isShowPercentage && content) {
        return math.multiply(content, 100) + '%';
      }
      return content;
    }
  }
};
</script>

<style>

</style>
